<!--结算页面-->
<template>
    <div class="shopping-balance">
        <!--头部地址或编辑-->
        <div class="bal-head">
            <div class="head-cancel">
                <span class="bal-cancel" @click="router.back">❮</span>
                <span class="bal-title">确认订单</span>
                <span class="bal-service" @click="router.push({ name: 'serviceChat' })">
                    <img src="/src/assets/icons/svg/customer-service.svg" />
                    <label>客服</label>
                </span>
            </div>
        </div>

        <!--我的地址-->
        <div class="my-address">
            <div class="address-left">
                <div class="addr-title">
                    <span>默认</span>
                    广东 广州 番禺区 东环街道
                </div>
                <div class="addr-detail">
                    东环街道番禺大道北555号天安总部中心22号楼浩云大厦
                </div>
                <div class="addr-preson">
                    王建 152****4073
                </div>
            </div>
            <div class="address-right">
                ❯
            </div>
        </div>

        <!--商品信息-->
        <div class="order-shops" v-if="shoppingCart && shoppingCart.length">
            <div class="bal-shopping" v-for="(sc, index) in shoppingCart" :key="index">
                <!--店铺-->
                <div class="bal-store">
                    <img src="/src/assets/icons/dp.jpeg" />
                    <label> {{ truncateText(sc.storeName, 20) }} ❯</label>
                </div>
                <!--商品信息-->
                <div class="shop-info">
                    <div class="shop-img">
                        <img src="/src/assets/lunbo/image3.jpeg" />
                    </div>
                    <div class="shop-content">
                        <div class="shop-title">{{ truncateText(sc.shopTitle, 20) }}</div>
                        <div class="shop-price">
                            <PriceDisplay :price="sc.price" />
                        </div>
                        <div class="shop-count">
                            <label style="color: #666666;" @click="reduceCount(sc)">–</label>
                            <button>{{ sc.shopCount }}</button>
                            <label @click="addCount(sc)">+</label>
                        </div>
                    </div>
                </div>
                <!--配送信息-->
                <div class="freight-delivery">
                    <label class="label-left">配送服务</label>
                    <span class="delivery-info" v-if="sc.freightPrice > 0">
                        快递费：<font style="color: red;">￥:{{sc.freightPrice.toFixed(2)}}</font>
                    </span>
                    <span class="delivery-info" v-else>
                        快递：<font style="color: red;">包邮</font>
                    </span>
                    &nbsp;&nbsp; 预计{{ 12 }}小时内发货
                </div>
                <!--店铺优惠-->
                <div class="store-discount" @click="isDiscount=true">
                    <label class="label-left">
                        店铺优惠券
                        <font>已选1张</font>
                    </label>
                    <span class="discount-info">
                        -￥{{ sc.discountPrice }}
                    </span>
                    &nbsp;❯
                </div>
                <hr style="width: 95%; margin: 10px auto;" />
                <!--留言-->
                <div class="remark-message">
                    <label class="label-left" style="padding-top: 5px;">留言</label>
                    <input placeholder="选填，请先与卖家协商一致，不可超过200个字" v-model="remarkMessage" />
                </div>
            </div>
        </div>
        <div v-else>
           请重新下单
        </div>

        <!--分类小计-->
        <div class="price-subtotal">
            <div>
                <label>商品金额</label>
                <span>￥{{ balancePrice.subtotal.toFixed(2) }}</span>
            </div>
            <div>
                <label>运费</label>
                <span>￥{{ balancePrice.freightPrice.toFixed(2) }}</span>
            </div>
            <div>
                <label>优惠金额</label>
                <span>-￥{{ balancePrice.discount.toFixed(2) }}</span>
            </div>
        </div>

        <!--发票信息-->
        <div class="order-bill">
            <div @click="isBill=true">
                <label>发票信息</label>
                <span>增值税电子普通发票-{{ truncateText('广东省广州市某某科技公司', 8) }} ❯</span>
            </div>
            <div @click="isPay=true">
                <label>支付方式</label>
                <span>在线支付 ❯</span>
            </div>
        </div>

        <!--结算订单-->
        <div class="bal-order">
            <div class="order-save">
                <span>
                    <PriceDisplay :price="balancePrice.total" />
                </span>
                <span class="save-price">
                    共省：{{ balancePrice.discount.toFixed(2) }}
                </span>
            </div>
            <div class="order-btn">
                <button>提交订单</button>
            </div>
        </div>
    </div>

    <!--优惠券-->
    <div :class="{'shadow-pop': true, 'slide-in-bottom': isDiscount, 'slide-out-bottom': !isDiscount}">
        <div :class="{'shadow-bill': isDiscount}" @click="isDiscount=false"></div>
        <div :class="{'pop-up-bill': isDiscount}">
            <h4 style="text-align: left; width: 95%;margin: 10px;">优惠券</h4>
            <div class="discount-title">
                <label @click="collarUse = 1">可领优惠券</label>
                <span :class="{'selected-discount': collarUse === 1}"></span>
            </div>
            <div class="discount-title">
                <label @click="collarUse = 2">可用优惠券</label>
                <span :class="{'selected-discount': collarUse === 2}"></span>
            </div>
            <!--可领优惠卷-->
            <div class="discount-collar" v-if="collarUse === 1">
                <div :class="{'color-ash': false, 'color-pink': true, 'discount-content': true}">
                    <span>
                        <label>店铺消费券</label>
                        <dl>￥520</dl>
                    </span>
                    <span>
                        <dd>满999使用</dd>
                        <dd>距离到期仅限7天</dd>
                    </span>
                    <button style="color:red;" :class="{'color-ash': false, 'color-pink': true}">立即领取</button>
                </div>
                <div :class="{'color-ash': false, 'color-pink': true, 'discount-content': true}">
                    <span>
                        <label>店铺消费券</label>
                        <dl>￥520</dl>
                    </span>
                    <span>
                        <dd>满999使用</dd>
                        <dd>距离到期仅限7天</dd>
                    </span>
                    <button style="color:red;" :class="{'color-ash': false, 'color-pink': true}">立即领取</button>
                </div>
                <div :class="{'color-ash': false, 'color-pink': true, 'discount-content': true}">
                    <span>
                        <label>店铺消费券</label>
                        <dl>￥520</dl>
                    </span>
                    <span>
                        <dd>满999使用</dd>
                        <dd>距离到期仅限7天</dd>
                    </span>
                    <button style="color:red;" :class="{'color-ash': false, 'color-pink': true}">立即领取</button>
                </div>
                <div :class="{'color-ash': false, 'color-pink': true, 'discount-content': true}">
                    <span>
                        <label>店铺消费券</label>
                        <dl>￥520</dl>
                    </span>
                    <span>
                        <dd>满999使用</dd>
                        <dd>距离到期仅限7天</dd>
                    </span>
                    <button style="color:red;" :class="{'color-ash': false, 'color-pink': true}">已领取</button>
                </div>
                <div class="discount-sure">
                    <button>确定</button>
                </div>
            </div>
            <!--可用优惠卷-->
            <div class="discount-use" v-if="collarUse === 2">
                <div class="discount-content" style="background-color: #99ccff;">
                    <span>
                        <label style="background-color:#6699ff;">店铺消费券</label>
                        <dl>￥520</dl>
                    </span>
                    <span>
                        <dd>满999使用</dd>
                        <dd>距离到期仅限7天</dd>
                    </span>
                    <button style="color:white; background-color:cornflowerblue; border-radius: 5px;">使用</button>
                </div>
                <div class="discount-content" style="background-color: #99ccff;">
                    <span>
                        <label style="background-color:#6699ff;">店铺消费券</label>
                        <dl>￥520</dl>
                    </span>
                    <span>
                        <dd>满999使用</dd>
                        <dd>距离到期仅限7天</dd>
                    </span>
                    <button style="color:white; background-color:cornflowerblue; border-radius: 5px;">使用</button>
                </div>
                <div class="discount-content" style="background-color: #99ccff;">
                    <span>
                        <label style="background-color:#6699ff;">店铺消费券</label>
                        <dl>￥520</dl>
                    </span>
                    <span>
                        <dd>满999使用</dd>
                        <dd>距离到期仅限7天</dd>
                    </span>
                    <button style="color:white; background-color:cornflowerblue; border-radius: 5px;">使用</button>
                </div>
                <div class="discount-sure">
                    <button>确定</button>
                </div>
            </div>
        </div>

    </div>

    <!--发票信息-->
    <div :class="{'shadow-pop': true, 'slide-in-bottom': isBill, 'slide-out-bottom': !isBill}">
        <div :class="{'shadow-bill': isBill}" @click="isBill=false"></div>
        <div :class="{'pop-up-bill': isBill}">
            <h4>开具发票</h4>
            <div class="invoice">
                <label>发票信息</label>
                <span><img src="/src/assets/icons/svg/help.svg" />发票须知</span>
            </div>
            <div class="invoice">
                <label>抬头类型</label>
                <span>
                    <input type="radio" name="headUpType" value="1" @click="taxpayer" checked />个人&nbsp;&nbsp;
                    <input type="radio" name="headUpType" value="2" @click="taxpayer" />公司
                </span>
            </div>
            <div class="invoice">
                <label>发票抬头</label>
                <span><input type="text" placeholder="可输入个人/单位名称" /></span>
            </div>
            <div class="invoice" v-if="isCompany">
                <label>纳税人识别号</label>
                <span><input type="text" placeholder="长度为15位或17位或18位或20位数" /></span>
            </div>
            <div class="invoice" style="margin-top: 30px;">
                <button class="sure-invoice" @click="openInvoice">确定</button>
            </div>
            <div class="invoice">
                <button class="no-invoice" @click="isBill=false">不开发票</button>
            </div>
        </div>
    </div>

    <!--支付方式-->
    <div :class="{'shadow-pop': true, 'slide-in-bottom': isPay, 'slide-out-bottom': !isPay}">
        <div :class="{'shadow-bill': isPay}" @click="isPay=false"></div>
        <div :class="{'pop-up-bill': isPay}">
            <h4>支付方式</h4>
            <div class="invoice">
                <button class="pay-type" @click="payType=1">在线支付</button>
            </div>
            <div class="invoice" style="margin-top: 30px;">
                <button class="sure-invoice" @click="selectPayType">确定</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import PriceDisplay from '@/components/product/PriceDisplay.vue';
// import MessageAlert from '@/components/MessageAlert.vue';
import { truncateText } from '@/components/util/tools.js';

const router = useRouter();


const shoppingCart = ref([
    {
        shopCount: 1,
        shopTitle: "Haier/海尔 定额双门冰箱BCD-11eee",
        price: 320.12,
        freightPrice: 0.00,
        discountPrice: 5,
        storeName: "中山天润盈红星美凯龙三翼鸟001号店",
        storeId: 1,
        shopImg: "/src/assets/lunbo/image2.jpeg"
    },{
        shopCount: 1,
        shopTitle: "Haier/海尔 定额双门冰箱BCD-11eee",
        price: 322.12,
        freightPrice: 10.00,
        discountPrice: 5,
        storeName: "中山天润盈红星美凯龙三翼鸟001号店",
        storeId: 2,
        shopImg: "/src/assets/lunbo/image2.jpeg"
    },{
        shopCount: 1,
        shopTitle: "Haier/海尔 定额双门冰箱BCD-11eee",
        price: 321.12,
        freightPrice: 10.00,
        discountPrice: 5,
        storeName: "中山天润盈红星美凯龙三翼鸟001号店",
        storeId: 3,
        shopImg: "/src/assets/lunbo/image2.jpeg"
    }
]);

//优惠
const balancePrice = computed(() => {
    const totals = {
        subtotal: 0, // 商品总额
        discount: 0, // 优惠金额
        freightPrice: 0, // 运费
        total: 0, // 最终总金额
    };

    // 计算商品总额：商品总价 x 商品数量 + 运费 - 优惠
    totals.subtotal = shoppingCart.value.reduce((total, item) => {
        return total + item.price * item.shopCount;
    }, 0);

    // 优惠金额
    totals.discount = shoppingCart.value.filter(item => item.discountPrice > 0)
            .reduce((total, item) => {
                return total + item.discountPrice;
            }, 0);

    // 计算运费总额
    totals.freightPrice = shoppingCart.value.filter(item => item.freightPrice > 0)
            .reduce((total, item) => {
                return total + item.freightPrice;
            }, 0);

      // 最终总金额 = 商品总额 - 优惠金额 + 运费
    totals.total = totals.subtotal - totals.discount + totals.freightPrice;

    return totals;
});

const addCount = (shop) => {
    shop.shopCount++;
}

const reduceCount = (shop) => {
    if(shop.shopCount == 1) {
        // isConfirmVisible.value = true;

        return;
    }
    shop.shopCount--;
}

const remarkMessage = ref('我丢你老母');

const isBill = ref(false);//选择发票
const isPay = ref(false); //选择支付方式
const isDiscount = ref(false); //选择优惠券
const collarUse = ref(2); //1为可领优惠券，2可用优惠券

const isCompany = ref(false);
const taxpayer = (event) => {
    console.log(event.target.value);
    if (event.target.value === '1') { // 个人
        isCompany.value = false;
    } else if (event.target.value === '2') { // 公司
        isCompany.value = true;
    }
}

const openInvoice = () => {
    // 提交要检验表单哪些信息不可以为空
    alert("已提交，发票正在开具中！");
    isBill.value = true;
}

const payType = ref(0);
const selectPayType = () => {
    const payDescr = ref(null);
    switch(payType.value) {
        case 1:
            payDescr.value = "在线支付";
            break;
        case 2:
            payDescr.value = "线下支付";
            break;
    }
    alert("已选择" + payDescr.value);
    isPay.value = false;
}

</script>

<style scoped>
.shopping-balance {
    width: 100%;
}

.shopping-balance .bal-head {
    width: 100%;
    background-color: #fff;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.bal-head .head-cancel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
    width: 95%;
    height: 40px;
    margin: auto;
    background-color: #fff;
}
.head-cancel .bal-cancel {
    width: 20px;
    font-size: 16px;
    float: left;
    font-weight: bold;
    cursor: pointer;
}
.head-cancel .bal-title {
    font-size: 18px;
    font-weight: bold;
}
.head-cancel .bal-service {
    float: right;
    flex: 1;
    width: 30px;
    cursor: pointer;
}
.bal-service img {
    width: 18px;
    height: 18px;
    display: block;
    margin: auto;
}
.bal-service label {
    font-size: 13px;
    display: block;
    margin: auto;
}

/*我的地址*/
.my-address {
    height: 100px;
    width: 95%;
    margin: auto;
    margin-top: 60px;
    background-color: white;
    border-radius: 8px;
}
.address-left {
    float: left;
    width: 90%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    text-align: left;
    padding: 5px;
    margin: auto;
}
.address-right {
    float: left;
    font-size: 20px;
    height: 100%;
    width: 5%;
    padding: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addr-title {
    width: 100%;
    font-size: 12px;
}
.addr-title span {
    background-color: #e06666;
    border-radius: 3px;
    padding: 1px 2px;
    color: white;
}
.addr-detail {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
}
.addr-preson {
    width: 100%;
    font-size: 12px;
    font-weight: bold;
}

/*商品订单*/
.order-shops {
    width: 95%;
    margin: auto;
    height: 100%;
}

/*商品信息*/
.bal-shopping {
    height: auto;
    width: 95%;
    margin: 10px auto;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}
/*商品所在店铺信息*/
.bal-store {
    display: flex;
}
.bal-store img {
    width: 18px;
    height: 16px;
    margin: auto 8px;
}
.bal-store label {
    margin: auto 0%;
    text-align: left;
}
/*商品标题，单价，数量信息*/
.shop-info {
    display: flex;
    flex-wrap: wrap;
}
.shop-info .show-img {
    border: 1px solid blue;
    margin: auto;
    box-sizing: border-box;
    flex: 0;
}
.shop-info .shop-img img {
    width: 10vh;
    height: 10vh;
    border-radius: 5px;
    margin: 5px;
}
/*商品内容信息*/
.shop-info .shop-content {
    height: 10vh;
    width: auto;
    margin: auto;
    margin-left: 5px;
    box-sizing: border-box;
    flex: 1;
}
.shop-content .shop-title {
    text-align: left;
}
.shop-content .shop-price {
    text-align: left;
    margin-top: 5px;
}
/*商品数量*/
.shop-content .shop-count {
    height: auto;
    box-sizing: border-box;
    float: left;
}
.shop-count button {
    height: 16px;
    background-color: #cccccc;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0px 10px;
    border-radius: 5px;
}
.shop-count label {
    font-weight: bold;
    font-size: 20px;
    box-sizing: border-box;
    margin: auto 8px;
    height: 10px;
}

/*配送信息，店铺优惠券，留言*/
.label-left {
    width: auto;
    font-size: 13px;
    text-align: left;
    box-sizing: border-box;
    flex: 1 0 1;
}
.label-left font {
    font-size: 11px;
    border: 1px solid #ff9900;
    color: #ff9900;
    padding: 1px;
    margin: 2px;
}
.freight-delivery {
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 10px auto;
}
.freight-delivery .delivery-info {
    box-sizing: border-box;
    flex: 1;
    text-align: right;
}
.store-discount {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 10px auto;
}
.store-discount .discount-info {
    box-sizing: border-box;
    flex: 1;
    color: #ff9900;
    text-align: right;
}
.remark-message {
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 10px auto;
}
.remark-message input {
    box-sizing: border-box;
    flex: 1;
    margin-left: 40px;
    border: 0px;
    background-color: #EAEAEA;
    height: 30px;
    border-radius: 5px;
}

/*分类小计，商品金额，运费金额，优惠金额*/
.price-subtotal {
    width: 95%;
    height: 90px;
    margin: 10px auto;
    background-color: white;
    border-radius: 10px;
    font-size: 13px;
}
/*发票信息*/
.order-bill {
    width: 95%;
    height: 60px;
    margin: auto;
    margin-bottom: 80px;
    background-color: white;
    border-radius: 10px;
    font-size: 13px;
}
.price-subtotal div, .order-bill div {
    display: flex;
    flex-wrap: wrap;
}
.price-subtotal div label, .order-bill div label {
    flex: 0 0 1;
    padding: 5px 10px;
    text-align: left;
}
.price-subtotal div span, .order-bill div span {
    flex: 1 0 0;
    padding: 5px 10px;
    text-align: right;
}

/*结算订单*/
.bal-order {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: white;
    height: 45px;
    width: 98%;
    border: 1px solid #DBDBDB;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
.bal-order .order-save {
    flex: 1;
    text-align: left;
}
.order-save span {
    display: block;
}
.order-save .save-price {
    color: red;
    font-size: 13px;
}
.bal-order .order-btn {
    box-sizing: border-box;
    text-align: right;
}
.order-btn button {
    background-color: #2196F3;
    color: white;
    border-radius: 50px;
    margin-right: 10px;
}

/*发票弹出框设置*/
.shadow-pop {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.shadow-pop .shadow-bill {
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    --x-offset: 0;
    --y-offset: 4px;
    box-shadow: var(--x-offset) var(--y-offset) 8px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 1;
}
.shadow-pop .pop-up-bill {
    height: auto;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    z-index: 2;
}
/*弹窗框发票的内容排班*/
.invoice {
    display: flex;
    flex-wrap: wrap;
    margin: 5px auto;
    width: 95%;
}
.invoice img {
    height: 17px;
    width: 17px;
}
.invoice label {
    box-sizing: border-box;
    flex: 1 0 1;
}
.invoice span {
    box-sizing: border-box;
    flex: 1 0 0;
    text-align: right;
}
.invoice input[type='text'] {
    height: 100%;
    border: 0px;
    width: 90%;
    text-align: right;
    border-radius: 15px;
    padding: 0px 5px;
}
.invoice .sure-invoice {
    width: 100%;
    height: 35px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color:#3c78d8;
    border-radius: 50px;
    padding: 0;
}
.invoice .no-invoice {
    width: 100%;
    height: 35px;
    font-size: 18px;
    font-weight: bold;
    color: #3c78d8;
    border-radius: 50px;
    padding: 0;
}
.invoice .pay-type {
    border: 1px solid #3c78d8;
    border-radius: 30px;
}

/*优惠券*/
.discount-title {
    width: 50%;
    display: inline-block;
}
.discount-title span {
    display: block;
}

.discount-line {
    width: 20%;
}

.selected-discount {
    width: 20%;
    border: 2px solid #3c78d8;
    border-radius: 50px;
    margin: auto;
}

.discount-content {
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    color: red;
    margin: 5px auto;
    border-radius: 5px;
}
.color-pink {
    background-color: #FFE4E1;
}
.color-ash {
    background-color: #F2F2F2;
}
.discount-content span {
    display: inline-block;
    margin: auto;
    margin-left: 0px;
    text-align: center;
}
.discount-content span label {
    font-size: 10px;
    background-color: #fcabab;
    padding: 1px 2px;
    border-radius: 5px;
    float: left;
    text-align: left;
    left: 2.5%;

}
.discount-content span dl {
    margin: 5px 20px;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    margin-top: 15px;
}
.discount-content span dd {
    width: 100%;
    text-align: left;
    margin-inline-start: 0px;
    font-size: 12px;
}

.discount-collar { /*可领优惠券*/
    display: flex;
    flex-wrap: wrap;
    margin: 5px auto;
    max-height: 300px;
    overflow: auto;
    margin-bottom: 50px;
}
.discount-use { /*可用优惠券*/
    display: flex;
    flex-wrap: wrap;
    margin: 5px auto;
    max-height: 300px;
    overflow: auto;
    margin-bottom: 50px;
}

.discount-sure {
    width: 95%;
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.discount-sure button {
    height: 40px;
    width: 100%;
    margin-top: 15px;
    background-color: #2196F3;
    border-radius: 50px;
    color: white;
    font-weight: bold;
}



</style>